<template>
   <div class="add-dictionary" >
   		<el-dialog title="新增字典信息" :visible.sync="infoFormVisible" width="60%" align="left" :before-close="dict_close">
        <div class="add-menu-action">
           <el-button size="mini" type="primary" plain  @click="addLine"><i class="iconfont icon-xinjian"></i> 添加行</el-button>
        </div>
<el-form ref="form" label-position="right" :model="dicForm">
        <div class="addDict_box">
          <el-row :gutter="20" class="addDict_title" >
            <el-col :span="4"><div class="grid-content bg-purple">字典编码</div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">自定义名称</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">排序值</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">创建人</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">状态</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"> </div></el-col>
          </el-row>
          <el-checkbox-group @change="handleCheck" v-model="checkItem">
              <el-row :gutter="20" v-for="(item,index) in dicForm.testdata">
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                    <el-form-item :prop="'testdata.' + index + '.attrCode'" :rules="{required: true, message: '字典编码不能为空', trigger: 'blur'}">
                      <el-input v-model="item.attrCode"></el-input>
                    </el-form-item>
                  </div>
                </el-col>

              <el-col :span="5">
                <div class="grid-content bg-purple">
                  <el-form-item :prop="'testdata.' + index + '.attrName'" :rules="{required: true, message: '请输入名称', trigger: 'blur'}">
                    <el-input v-model="item.attrName"></el-input>
                  </el-form-item>
                </div>
              </el-col>

              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <el-form-item>
                    <el-input type="number" v-model="item.attrOrderId"></el-input>
                  </el-form-item>
                </div>
              </el-col>

              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <el-form-item :prop="'testdata.' + index + '.creator'" :rules="{required: true, message: '请输入创建人', trigger: 'blur'}">
                    <el-input v-model="item.creator"></el-input>
                  </el-form-item>
                </div>
              </el-col>

              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <el-form-item>
                    <el-radio v-model="item.disenable" label="1">启用</el-radio>
                    <el-radio v-model="item.disenable" label="0">禁用</el-radio>
                  </el-form-item>
                </div>
              </el-col>


              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <el-form-item>
                    <el-button @click="delLine(index)"  type="danger" plain  icon="el-icon-delete" size="mini">删除</el-button>
                  </el-form-item>
                </div>
              </el-col>

              </el-row>
          </el-checkbox-group>
        </div>

        <div class="dict_butbox">
          <el-button @click="dict_save">保存<i class="el-icon-upload el-icon--right"></i></el-button>
          <el-button @click="dict_close">取消<i class="el-icon-circle-close el-icon--right"></i></el-button>
        </div>
</el-form>
   		</el-dialog>
    </div>
</template>
<script>
import _ from 'lodash'
export default{
	props:["infoFormVisible","addDictInfoSubmit","addDictInfoForm","attrId","types"],
	data(){
		return{
      dialogFormVisible:false,
      rules:{
        attrCode:[
            { required: true, message: '请输入字典编码', trigger: 'blur' }
        ],
        attrId:[
            { required: true, message: '请输入自定义编码', trigger: 'blur' }
        ],
        disenable:[
            { required: true, message: '请输入启用状态', trigger: 'blur' }
        ],
        attrName:[
            { required: true, message: '请输入自定义名称', trigger: 'blur' }
        ],
        creator:[
            { required: true,message: '请输入创建人',trigger: 'blur' }
        ],
        attrOrderId:[
            {required: true, message: '请输入排序值', trigger: 'blur'}
        ]
      },
      dicForm:{
        testdata:[]
      },
      checkItem:[]
		}
	},
  methods:{
    handleCheckAll(val){
      this.checkItem = [];
      if(val){
        for(var i = 0; i < this.dicForm.testdata.length; i++){
           this.checkItem.push(i);
        }
      }
    },
    handleCheck(val){
      // alert(val)
    },
    addLine(){
      let params = {
        attrCode:'',
        attrId:this.attrId,
        attrName:'',
        attrOrderId:'',
        companyId:1028,
        creator:'',
        disenable:"1"
      }
      this.dicForm.testdata.push(params);
    },
    delLine(v){
        var arrays = this.dicForm.testdata;
        arrays.splice(v,1);
    },
    dict_save(){
      this.$refs['form'].validate((valid) => {
         if (valid) {
            this.addDictInfoSubmit(this.dicForm.testdata);
           console.log(this.dicForm.testdata)
         }else{
             this.$message.error("请按规则填写");
         }
      })
    },
    dict_close(){
       this.$emit('update:infoFormVisible', false)
    }
  },
  created(){
      this.dicForm.testdata = _.clone(this.addDictInfoForm);
  }
}
</script>
<style scoped>
  .addDict_box{
    border: 1px solid #dcdfe6;
    border-radius: 3px;
    padding:5px;
    margin-top: 8px;
  }
  .dict_butbox{
    padding-top: 20px;
    text-align: right;
  }
  .addDict_title{
    padding: 8px 0;
    text-align: center;
  }
  .add-dictionary-dialog__body {
    padding-right: 20px;
  }
</style>
